<template>
  <div>
    <!-- -->
                        <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 通道类型：</div>
                                <el-select v-model="temp.channel_type" placeholder="请输入通道类型" style="width:100%" :disabled='radio == 7 || radio == 8'> 
                                                <el-option
                                                   v-for="item in channelOptions"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                                   </el-option>
                                 </el-select>
                            </div>
                            <div class="items">
                                <div class="leftname"><span>*</span> 通道号：</div>
                                <div class="elinputdisabled">{{temp.channel_number}}</div>
                            </div>
                            
                        </div>
                        <div class="infoitems">
                            <div class="items itemright">
                               <div class="leftname"><span>*</span> 通道名称：</div>
                                <el-input v-model="temp.channel_name" placeholder="请输入通道名称"></el-input>
                            </div>
                             <div class="items">
                                 <div class="leftname"><span>*</span> 发送间隔：</div>
                                <el-input v-model="temp.channel_interval" placeholder="请输入发送间隔(ms)"></el-input>
                            </div>
                             
                            
                        </div>
                        <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname">通道规约：</div>
                                <el-select v-model="temp.channel_protocol" placeholder="请选择通道规约" style="width:100%">
                                                      <el-option
                                                        v-for="item in protocolList"
                                                        :key="item.id"
                                                        :label="item.name"
                                                        :value="item.id">
                                                        </el-option>
                                </el-select>
                            </div>
                            <div class="items">
                                <div class="leftname"><span>*</span> 接受超时：</div>
                                <el-input v-model="temp.timeout" placeholder="请输入接受超时(ms)"></el-input>
                            </div>
                        </div>
                        <div class="radio-type">
                            <div class="left-type">
                                  <div class="myname">端口类型：</div>
                                  <el-radio v-model="radio" label="10">无</el-radio>
                                  <el-radio v-model="radio" label="1">串口</el-radio>
                                  <el-radio v-model="radio" label="2">TCP服务端</el-radio>
                                  <el-radio v-model="radio" label="3">TCP客户端</el-radio>
                                  <el-radio v-model="radio" label="4">MQTT客户端</el-radio>
                                  <el-radio v-model="radio" label="5">UDP客户端</el-radio>
                                  <el-radio v-model="radio" label="6">CAN</el-radio>
                                  <el-radio v-model="radio" label="7">DI</el-radio>
                                  <el-radio v-model="radio" label="8">DO</el-radio>
                            </div>
                            <div class="right-tongdao">
                              <div class="myname">通道设置：</div>
                                <el-checkbox v-model="auto_open"></el-checkbox>
                                <span class="tong">通道自动打开</span>
                            </div>
                        </div>
                        <!-- 串口 -->
                        <div class="body-items" v-if="radio == 1">
                          <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 串口号：</div>
                               <el-select v-model="serial_number" filterable allow-create>
                                                <el-option
                                                      v-for="item in serial_numberList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                 </el-select>
                            </div>
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 奇偶校验：</div>
                               <el-select v-model="parity">
                                                <el-option
                                                      v-for="item in parityList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                            </div>
                            <div class="items">
                               <div class="leftname "><span>*</span> 数据位：</div>
                                <el-select v-model="data_bits">
                                                <el-option
                                                      v-for="item in data_bitsList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                              
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 波特率：</div>
                                 <el-select v-model="baud_rate">
                                                <el-option
                                                      v-for="item in baud_rateList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                            </div>
                             <div class="items itemright">
                                 <div class="leftname"><span>*</span> 停止位：</div>
                                 <el-select v-model="stop_bits">
                                                <el-option
                                                      v-for="item in stop_bitsList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                            </div>
                             <div class="items">
                               
                            </div>
                           
                         </div>
                        </div>
                        <!-- TPC服务端 -->
                        <div class="body-items" v-if="radio == 2">
                          <div class="infoitems">
                             <div class="items itemright">
                               <div class="leftname"><span>*</span> 本机地址：</div>
                                <el-input v-model="local_address" placeholder="[IP地址格式]"></el-input>
                                
                            </div>
                             <div class="items itemright">
                               <div class="leftname"><span>*</span> 本机端口：</div>
                                <el-input v-model="local_port" placeholder="[整型数字]"></el-input>
                            </div>
                            <div class="items">
                                <div class="leftname"><span>*</span> 远方地址：</div>
                                <el-input v-model="rightname" placeholder="[IP地址格式]"></el-input>
                            </div>
                         </div>
                        
                        </div>
                        <!-- TPC客户端 -->
                        <div class="body-items" v-if="radio == 3">
                          <div class="infoitems">
                             <div class="items itemright">
                               <div class="leftname "><span>*</span> 远方地址：</div>
                                <el-input v-model="remote_address" placeholder="[IP地址格式]"></el-input>
                            </div>
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 远方端口：</div>
                                <el-input v-model="remote_port" placeholder="[整型数字]"></el-input>
                            </div>
                             <div class="items">
                               
                            </div>
                           
                         </div>
                        </div>
                        <!-- MQTT客户端 -->
                        <div class="body-items" v-if="radio == 4">
                           <div class="infoitems">
                             <div class="items itemright">
                              <div class="leftname">客户机标识：</div>
                                <el-input v-model="rightname" placeholder="请输入客户机标识"></el-input>
                            </div>
                             <div class="items itemright">
                                <div class="leftname">远程地址：</div>
                                <el-input v-model="rightname" placeholder="[IP地址格式]"></el-input>
                            </div>
                            <div class="items">
                               <div class="leftname">发布主题：</div>
                                <el-input v-model="rightname" placeholder="请输入发布主题"></el-input>
                                
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                               <div class="leftname ">用户名：</div>
                                <el-input v-model="rightname" placeholder="请输入用户名"></el-input>
                            </div>
                             <div class="items itemright">
                                <div class="leftname">远程端口：</div>
                                <el-input v-model="rightname" placeholder="[整型数字]"></el-input>
                            </div>
                             <div class="items">
                               <div class="leftname">订阅：</div>
                                <el-input v-model="rightname" placeholder="请输入发布主题"></el-input>
                               
                            </div>
                           
                         </div>
                           <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname ">密码：</div>
                                <el-input v-model="rightname" placeholder="请输入密码"></el-input>
                            </div>
                             <div class="items itemright">
                                
                            </div>
                             <div class="items">

                            </div>
                           
                         </div>
                        </div>
                        <!-- DI口 -->
                        <div class="body-items" v-if="radio == 7">
                          <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span>DI口：</div>
                                <el-input v-model="di_number" placeholder="请输入DI口"></el-input>
                            </div>
                             <div class="items itemright">
                                
                            </div>
                             <div class="items">

                            </div>
                           
                         </div>
                        </div>
                        <!-- DO口 -->
                        <div class="body-items" v-if="radio == 8">
                          <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span>DO口：</div>
                                <el-input v-model="do_number" placeholder="请输入DO口"></el-input>
                            </div>
                             <div class="items itemright">
                                
                            </div>
                             <div class="items">

                            </div>
                           
                         </div>
                        </div>
  </div>
</template>

<script>
export default {
  name: 'GeneralProject1111',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>